{extend name="base" /}
{block name="css"}
<style>
body,html{color:#333;margin:0;height:100%;font-family:"Myriad Set Pro","Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400}
.weui-current-item{width:29%;float:left;margin:2%;text-align:center;border-radius:100px;background:#ededed;padding:6px 0;font-size:14px}
.this-card{background:var(--swiper-theme-color);color:#fff}
.weui-list-box{padding:0 10px}
.textarea-block{background:#ededed;width:92%;margin:0 auto;border-radius:5px;height:10rem}
.textarea-block textarea{width:100%;padding:14px;font-size:14px;overflow:hidden;resize:none;height:8rem;border:none;background:0 0;line-height:1.8}
.weui-textarea-count{text-align:right;padding-right:1rem}
.weui-upload-box{background-color:#fff;padding:.1rem 1rem .5rem .4rem}
#chose_pic_btn{width:30%;height:105px;position:relative;display:inline-block;background-image:url();box-sizing:border-box;background-size:35px 35px;background-position:center center;background-repeat:no-repeat;background-color:#ededed;margin-left:3.3333%;margin-bottom:12px;border-radius:5px}
#chose_pic_btn input{position:absolute;left:0;top:0;opacity:0;width:100%;height:100%}
.weui-upload-box .pic_look{width:30%;height:100px;display:inline-block;background-size:cover;background-position:center center;background-repeat:no-repeat;box-sizing:border-box;margin-left:3.3333%;margin-bottom:12px;position:relative;border-radius:5px}
.weui-upload-box .pic_look em{position:absolute;display:inline-block;width:20px;height:20px;background-color:#fff;color:#fff;font-size:18px;right:-.5rem;top:-.5rem;text-align:center;line-height:22px;border-radius:50%;font-weight:700;z-index:1;background-image:url();background-size:20px}
#chose_pic_btn input{position:absolute;left:0;top:0;opacity:0;width:100%;height:100%}
.title_phone{color:#444;font-weight:500;overflow:hidden;position:relative}
.weui-pay-com{width:92%;margin:.5rem auto 0}
.weui-pay-com button{background-color:var(--swiper-theme-color);color:#fff;border:none;width:100%;padding:12px 0;border-radius:5px;font-size:16px}

.message{padding:6px;}
.time{font-size: 12px;color:#999;text-align:center;border-radius: 50px;width: 30%;margin: 5px auto;}
.msg img{width:35px;float:left;border-radius: 100%;}
.msg p{float:left;margin:0 4px;padding: 0 10px;background:#ccc;position:relative;border-radius:.2rem;max-width:80%;box-sizing:border-box;}
.show .msg,.show .msg img,.show .msg p{float:right;}
.show .msg p{float:right;background: var(--swiper-theme-color);color: #fff;}
.send, .show {padding-bottom: 0.3rem;}
.send:after,.show:after,.msg:after{ content: "";clear: both;display: table; }
.weui-navbar__item.weui-bar__item--on{background: rgba(0,0,0,0) none repeat scroll 0 0;border-bottom: 2px solid var(--swiper-theme-color);color: var(--swiper-theme-color);transition: right .3s cubic-bezier(.35,0,.25,1) 90ms,left .3s cubic-bezier(.35,0,.25,1);}
.weui-navbar + .weui-tab__bd{padding-top: 44px;}
.weui-navbar__item{padding: 10px 0;}
</style>
{/block}
{block name="body"}
<!-- 主要内容 开始 -->
<div class="weui-tab__bd-item">
    <header class="weui-navBar weui-navBar-fixed">
        <a href="javascript:history.go(-1);" class="weui-navBar-item">
            <i class="icon iconfont icon-fanhui"></i>
        </a>
        <div class="weui-center">
            <span class="weui-center-title">意见反馈</span>
        </div>
        <a href="javascript:;" class="weui-navBar-item">
        </a>
    </header>
    <div class="weui-tab">
        <div class="weui-navbar">
            <a class="weui-navbar__item weui-bar__item--on" href="#tab1">
              留言反馈
            </a>
            <a class="weui-navbar__item" href="#tab2">
              我的留言
            </a>
        </div>
        <div class="weui-tab__bd">
            <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
                <div class="weui-flex">
                    <div class="weui-flex-box">
                        <h2>您好，请选择标签？</h2>
                    </div>
                </div>
                <div class="weui-list-box clearfix">
                    <a class="weui-current-item " data-value='1'>术前咨询/保障
                    </a>
                    <a class="weui-current-item this-card" data-value='2'>到店咨询
                    </a>
                    <a class="weui-current-item" data-value='3'>优惠促销
                    </a>
                    <a class="weui-current-item" data-value='4'>派单/录单
                    </a>
                    <a class="weui-current-item" data-value='5'>我要投诉
                    </a>
                    <a class="weui-current-item" data-value='6'>其他
                    </a>
                </div>
                <div class="weui-flex">
                    <div class="weui-flex-box">
                        <h2>具体建议内容</h2>
                    </div>
                </div>
                <div class="textarea-block">
                    <textarea class="textarea-item" name="content" placeholder="在这里输入内容，不超过100字。" maxlength="100" spellcheck="false"></textarea>
                    <div class="weui-textarea-count">
                        <span class="textareaInput">0</span>
                        /<span class="textareaTotal">100</span>
                    </div>
                </div>
                <div class="weui-flex">
                    <div class="weui-flex-box">
                        <h2>上传图片</h2>
                    </div>
                </div>
                <div class="weui-upload-box">
                    <div class="weui-upload-pic">
                        <span id="chose_pic_btn" style="">
                            <input type="file" accept="image/*"/>
                        </span>
                    </div>
                </div>
                <div class="weui-flex">
                    <div class="title_phone">联系电话</div>
                    <div class="weui-flex-box">
                        <h2>{$info.mobile|substr_replace='****',3,4}</h2>
                    </div>
                </div>
                <div class="weui-pay-com">
                    <button>提交</button>
                </div>
            </div>

            <div id="tab2" class="weui-tab__bd-item">
                <div class="message">
                {volist name="data" id="v" empty="$empty"}
                    <div class="show">
                        <div class="time">{$v.addtime|date="m/d H:i"}</div>
                        <div class="msg">
                            <img src="https://www.17sucai.com/preview/1/2017-06-26/talk/images/touxiang.png" alt="">
                            <p><i class="msg_inputr"></i>{$v.content}</p>
                        </div>
                    </div>

                    <div class="send">
                        <div class="time">{$v.replytime|date="m/d H:i"}</div>
                        <div class="msg">
                            <img src="https://www.17sucai.com/preview/1/2017-06-26/talk/images/touxiangm.png" alt="">
                            <p><i class="msg_input"></i>{$v.recontent}</p>
                        </div>
                    </div>
                {/volist}
                </div>
            </div>
        </div>
    </div>
    <div class="divFooter"></div>
</div>

{/block}
{block name="js"}
{js href="__JS__/localImg.js,mobileImg.js" /}
<script type="text/javascript">
  $(function () {
    $(document).ready(function() {
        var lenInput = $('.textarea-item').val().length;
        $(".textarea-item").keyup(function() {
            lenInput = $(this).val().length;
            if (lenInput > 0 && lenInput <= 300) {
                $('.textareaInput').html(lenInput);
                $('.textarea-btn').attr('disabled', false);
            } else {
                $('.textarea-btn').attr('disabled', true);
            }
        });
    });
    //字数限制500字

    var picArr = new Array();
    $('input:file').localResizeIMG({
        width: 800,
        quality: 1,
        // 图片压缩 默认1 不压缩
        success: function(result) {
            var img = new Image();
            img.src = result.base64;
            var _str = "<span class='pic_look' style='background-image: url(" + img.src + ")'><em id='delete_pic'></em></span>"
            $('#chose_pic_btn').before(_str);
            var _i = picArr.length
            picArr[_i] = result.base64;
            console.log(picArr)
        }
    });
    // 删除图片默认显示
    $(document).on('click', '#delete_pic', function(event) {
        var aa = $(this).parents(".pic_look").index();
        picArr.splice(aa, 1);
        $(this).parents(".pic_look").remove();
        console.log(picArr);
    });
    $('.weui-current-item').click(function(e) {
        $(this).addClass('this-card').siblings().removeClass('this-card');
        $('#type-amount').html($(this).find('.cardAmount').html());
    })
    $('.weui-pay-com').click(function () {
        var types = $.trim($('.this-card').data('value'));
        var content = $.trim($('.textarea-item').val());
        if(!content) $.toptip('留言内容不能为空');
        else $.post('',{types:types,content:content},function(res){
            if (res.code === 1) {
                $.toast(res.msg,'text');
                setTimeout(function(){
                    location.href = res.url;
                },1000);
            } else {
                $.toptip(res.msg);
            }
        })
    })

  });
</script>
{/block}